<template>
    <div class="net-nurse">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <FormItem label="姓名" prop="RealName">
                <i-input :disabled="isDisabled" v-model="formValidate.RealName" placeholder="请输入姓名"></i-input>
            </FormItem>
            <FormItem label="性别" prop="Sex">
                <RadioGroup v-model="formValidate.Sex">
                    <Radio label="false">女</Radio>
                    <Radio label="true">男</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem label="邮箱" prop="Email">
                <i-input :disabled="isDisabled" v-model="formValidate.Email" placeholder="请输入邮箱"></i-input>
            </FormItem>
            <FormItem label="手机号" prop="MobilePhone">
                <i-input :disabled="isDisabled" v-model="formValidate.MobilePhone" placeholder="请输入手机号"></i-input>
            </FormItem>
            <FormItem label="身份证" prop="IdCard">
                <i-input :disabled="isDisabled" v-model="formValidate.IdCard" placeholder="请输入身份证"></i-input>
            </FormItem>
            <FormItem label="生日" prop="Birthday">
                <FormItem prop="date">
                    <DatePicker :disabled="isDisabled" type="date" placeholder="请选择生日" v-model="formValidate.Birthday"></DatePicker>
                </FormItem>
            </FormItem>
            <FormItem label="现住址" prop="Address">
                <i-input :disabled="isDisabled" v-model="formValidate.Address" placeholder="请输入现住址"></i-input>
            </FormItem>
            <FormItem label="学历" prop="Education">
                <Select v-model="formValidate.Education" :disabled="isDisabled">
                    <Option value="高中及以下">高中及以下</Option>
                    <Option value="专科">专科</Option>
                    <Option value="本科">本科</Option>
                    <Option value="硕士及以上">硕士及以上</Option>
                </Select>
            </FormItem>
            <FormItem label="民族" prop="Nation">
                <i-input :disabled="isDisabled" v-model="formValidate.Nation" placeholder="请输入民族"></i-input>
            </FormItem>
            <FormItem label="婚姻" prop="Marry">
                <Select v-model="formValidate.Marry" :disabled="isDisabled">
                    <Option value="1">未婚</Option>
                    <Option value="2">已婚</Option>
                    <Option value="3">离异</Option>
                    <Option value="4">丧偶</Option>
                </Select>
            </FormItem>
            <FormItem label="接单城市" prop="name">
                <div class="cascader">
                    <Cascader v-model="cascader" :disabled="isDisabled" :data="cityList" placeholder="请选择城市" @on-change="handleChangeCity"></Cascader>
                </div>
            </FormItem>
            <FormItem label="签约门店" prop="name">
                <Select placeholder="请选择接单门店" v-model="ShopName" :disabled="isDisabled">
                    <Option v-for="item in shopList" :value="item.ID" :key="item.ID" @click.native="handleshopList(item)">{{ item.ShopName }}</Option>
                </Select>
            </FormItem>
            <Row>
                <i-col span="12">
                    <FormItem label="护士资格证" prop="PIcDoc">
                        <img-upload
                            @delImgList="delImgList"
                            :multiple="false"
                            :defaultList="imgDefaultList.PIcDoc"
                            :data="{directory:'OrgPath'}"
                            v-if="isImg"
                            :value="'PIcDoc'"
                            :check="1"
                            @setImgLIst="setImgLIst"
                        ></img-upload>
                    </FormItem>
                </i-col>
                <i-col span="12">
                    <FormItem label="身份证正面" prop="PicCardUp">
                        <img-upload
                            @delImgList="delImgList"
                            v-if="isImg"
                            :defaultList="imgDefaultList.PicCardUp"
                            :multiple="false"
                            :data="{directory:'OrgPath'}"
                            :value="'PicCardUp'"
                            :check="1"
                            @setImgLIst="setImgLIst"
                        ></img-upload>
                    </FormItem>
                </i-col>
                <i-col span="12">
                    <FormItem label="身份证背面" prop="PicCardDown">
                        <img-upload
                            v-if="isImg"
                            @delImgList="delImgList"
                            :multiple="false"
                            :defaultList="imgDefaultList.PicCardDown"
                            :value="'PicCardDown'"
                            :check="1"
                            @setImgLIst="setImgLIst"
                        ></img-upload>
                    </FormItem>
                </i-col>
            </Row>
            <FormItem v-if="!isDisabled">
                <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
            </FormItem>
        </Form>
    </div>
</template>

<script>
import cityListJson from '@/config/citySecondLevel.js'
import ImgUpload from '../components/ImgUpload'
import { getShopData, getOpenidWeChat, getItemInfo, submit } from './service'

export default {
    data() {
        return {
            cityList: [],
            isDisabled: false,
            code: '',
            openId: '',
            imglist: {
                PicCardDown: [],
                PicCardUp: [],
                PIcDoc: []
            },
            shopList: [],
            ShopName: '',
            cascader: [],
            formValidate: {
                Sex: 'false'
            },
            imgDefaultList: {
                PicCardDown: [],
                PicCardUp: [],
                PIcDoc: []
            },
            isImg: false,
            ruleValidate: {
                RealName: [
                    {
                        required: true,
                        message: '请输入完整信息',
                        trigger: 'change'
                    }
                ],
                Sex: [
                    {
                        required: true,
                        message: '请输入完整信息',
                        trigger: 'change'
                    }
                ],
                Email: [
                    {
                        required: true,
                        message: '请输入完整信息',
                        trigger: 'change'
                    }
                ],
                MobilePhone: [
                    {
                        required: true,
                        message: '请输入完整信息',
                        trigger: 'change'
                    }
                ],
                IdCard: [
                    {
                        required: true,
                        message: '请输入完整信息',
                        trigger: 'change'
                    }
                ],
                Birthday: [
                    {
                        required: true,
                        message: '请输入完整信息',
                        trigger: 'change',
                        pattern: /.+/
                    }
                ],
                Address: [
                    {
                        required: true,
                        message: '请输入完整信息',
                        trigger: 'change'
                    }
                ],
                Education: [
                    {
                        required: true,
                        message: '请输入完整信息',
                        trigger: 'change'
                    }
                ],
                Nation: [
                    {
                        required: true,
                        message: '请输入完整信息',
                        trigger: 'change'
                    }
                ],
                Marry: [
                    {
                        required: true,
                        message: '请输入完整信息',
                        trigger: 'change'
                    }
                ]
            }
        }
    },
    components: {
        ImgUpload
    },
    mounted() {
        this.setCity()
        if (!this.getQueryString('code')) {
            this.getCode()
        } else {
            this.code = this.getQueryString('code')
            this.getOpenidWeChat()
        }
        document.title = '网约护士'
    },
    methods: {
        getOpenidWeChat() {
            getOpenidWeChat({
                code: this.code
            }).then(res => {
                this.formValidate.OpenidWeChat = res.openid
                this.getItemInfo()
            })
        },
        getItemInfo() {
            getItemInfo({
                openid: this.formValidate.OpenidWeChat
            }).then(res => {
                if (res.data) {
                    if (res.data.State != 2) {
                        this.isDisabled = true
                    }
                    this.formValidate = {
                        ...res.data,
                        Sex: res.data.Sex + ''
                    }
                    this.imgDefaultList.PicCardDown.push({
                        url: res.data.PicCardDown
                    })
                    this.imgDefaultList.PicCardUp.push({
                        url: res.data.PicCardUp
                    })
                    this.imgDefaultList.PIcDoc.push({
                        url: res.data.PIcDoc
                    })
                    this.cascader.push(this.formValidate.ProvID)
                    this.cascader.push(this.formValidate.CityID)
                    this.getShopList(this.cascader[1])
                    this.ShopName = res.data.ShopID + '|' + res.data.ComID
                    this.imglist.PIcDoc.push({
                        url: res.data.PIcDoc
                    })
                    this.imglist.PicCardUp.push({
                        url: res.data.PicCardUp
                    })
                    this.imglist.PicCardDown.push({
                        url: res.data.PicCardDown
                    })
                }
                this.isImg = true
            })
        },
        getCode() {
            var appid = 'wx0021428f45a79c6b'
            var redirect_uri = encodeURIComponent(
                'http://nurse.taikangyun365.com/index.html#/netNurse'
            )
            window.location.href =
                'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
                appid +
                '&redirect_uri=' +
                redirect_uri +
                '&response_type=code&scope=snsapi_userinfo#wechat_redirect'
        },
        getQueryString(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
            var r = window.location.search.substr(1).match(reg)
            if (r != null) return unescape(r[2])
            return null
        },
        handleChangeCity(value) {
            this.formValidate.ProvID = value[0]
            this.formValidate.CityID = value[1]
            this.getShopList(value[1])
        },
        getShopList(cityid) {
            getShopData({ cityid }).then(res => {
                this.shopList = res.data
            })
        },
        handleshopList(data) {
            let ids = data.ID.split('|')
            this.formValidate.ComID = ids[1]
            this.formValidate.ShopID = ids[0]
        },
        setImgLIst(list, value) {
            this.imglist[value] = list
        },
        delImgList(list, value) {
            this.imglist[value] = list
        },
        handleSubmit() {
            this.$refs.formValidate.validate(valid => {
                if (valid) {
                    if (!this.formValidate.ProvID) {
                        this.$Message.error('请选择接单城市')
                        return
                    }
                    if (!this.formValidate.ComID) {
                        this.$Message.error('请选择签约门店')
                        return
                    }
                    if (
                        !this.imglist.PIcDoc ||
                        !this.imglist.PicCardUp ||
                        !this.imglist.PicCardDown
                    ) {
                        this.$Message.error('上传图片不完整')
                        return
                    }
                    this.formValidate = {
                        ...this.formValidate,
                        PIcDoc: this.imglist.PIcDoc[0].url,
                        PicCardUp: this.imglist.PicCardUp[0].url,
                        PicCardDown: this.imglist.PicCardDown[0].url
                    }
                    this.formValidate.State = 0

                    submit(this.formValidate).then(res => {
                        if (res.state == 'error') {
                            this.$Message.error(res.message)
                        } else {
                            this.$Message.success('操作成功')
                            this.getItemInfo()
                        }
                    })
                }
            })
        },
        setCity() {
            this.cityList = cityListJson.list
        }
    }
}
</script>

<style lang="less">
.net-nurse {
    width: 100vw;
    padding: 20px;
    overflow: hidden;
}

.cascader {
    width: 100%;
}
</style>
